{{#if isFilesystem}}
<route lang="yaml">
meta:
  title: 列表页
</route>

{{/if}}
<!--
  *  @description {{cname}}列表页
  *  @author ${USER}
  *  @date ${DATE}
-->
<script setup lang="ts">
import api from '@/api/modules/{{ fileName }}'
// 父子组件事件交互
import eventBus from '@/utils/eventBus'
import { ElMessage, ElMessageBox } from 'element-plus'
// 新增/编辑表单容器组件
import FormMode from './components/FormMode/index.vue'
// 全局唯一name
defineOptions({
  name: '{{ componentName }}',
})
// 路由跳转实现（详情展示方式为router时使用）
const router = useRouter()
// 引入公共分页函数
const { pagination, getParams, onSizeChange, onCurrentChange, onSortChange } = usePagination()

// 列表表格是否自适应高度
const tableAutoHeight = ref(false)

/**
 * 详情展示模式 可灵活切换, 目前使用的方式: drawer
 * router 路由跳转
 * dialog 对话框
 * drawer 抽屉
 */
const formMode = ref<'router' | 'dialog' | 'drawer'>('router')

/**
 * 新增/编辑表单容器组件的参数
 * visible 是否打开容器
 * id 唯一索引（编辑会传入）
 */
const formModeProps = ref({
  visible: false,
  id: '',
})

// 搜索条件
const searchDefault = {
  title: '',
}
const search = ref({ ...searchDefault })
// 搜索条件重置
function searchReset() {
  Object.assign(search.value, searchDefault)
}

/**
 * 批量操作
 * enable 是否启用
 * selectionDataList 选中的数据
 */
const batch = ref({
  enable: true,
  selectionDataList: [],
})

// 控制列表加载遮罩
const loading = ref(false)
const dataList = ref([])

onMounted(() => {
  // 请求api获取列表数据
  getDataList()
  if (formMode.value === 'router') {
    /**
     * 官方解释：为给定类型注册一个事件处理程序。
     * @Param type （字符串|符号）要监听的事件类型，或'*'所有事件
     * @Param handler 函数响应给定事件而调用的函数
     * 仅路由方式作用，在子页面返回该页面时触发事件
     */
    eventBus.on('get-data-list', () => {
      getDataList()
    })
  }
})

onBeforeUnmount(() => {
  if (formMode.value === 'router') {
    /**
     * 官方解释：删除指定类型的事件处理程序。如果handler省略，则删除所有指定类型的处理程序。
     * @Param type （字符串|符号）要取消注册的事件类型handler，或'*'
     * @Param handler 函数?要删除的处理函数
     * 离开页面时触发
     */
    eventBus.off('get-data-list')
  }
})
// 请求api获取地址列表
function getDataList() {
  loading.value = true
  const params = {
    ...getParams(),
    ...(search.value.title && { title: search.value.title }),
  }
  api.list(params).then((res: any) => {
    loading.value = false
    dataList.value = res.data.list
    pagination.value.total = res.data.total
  })
}

// 每页数量切换
function sizeChange(size: number) {
  onSizeChange(size).then(() => getDataList())
}

// 当前页码切换（翻页）
function currentChange(page = 1) {
  onCurrentChange(page).then(() => getDataList())
}

// 字段排序
function sortChange({ prop, order }: { prop: string, order: string }) {
  onSortChange(prop, order).then(() => getDataList())
}
// ---------------------------------------------------------------------------------------------------------------------
/**
 * 新增
 * 路由方式：路由跳转到新增页面
 * 对话框方式：打开对话框
 * drawer方式：打开抽屉
 */
function onCreate() {
  if (formMode.value === 'router') {
    router.push({
      name: 'routeName',
    })
  }
  else {
    formModeProps.value.id = ''
    formModeProps.value.visible = true
  }
}
function onEdit(row: any) {
  if (formMode.value === 'router') {
    router.push({
      name: 'routeName',
      params: {
        id: row.id,
      },
    })
  }
  else {
    formModeProps.value.id = row.id
    formModeProps.value.visible = true
  }
}

function onDel(row: any) {
  ElMessageBox.confirm(`确认删除「${row.title}」吗？`, '确认信息').then(() => {
    api.delete(row.id).then(() => {
      getDataList()
      ElMessage.success({
        message: '模拟删除成功',
        center: true,
      })
    })
  }).catch(() => {})
}
</script>

<template>
  <div :class="{ 'absolute-container': tableAutoHeight }">
    <FaPageHeader title="{{ cname }}管理" class="mb-0" />
    <FaPageMain :class="{ 'flex-1 overflow-auto': tableAutoHeight }" :main-class="{ 'flex-1 flex flex-col overflow-auto': tableAutoHeight }">
      <FaSearchBar :show-toggle="false">
        <template #default="{ fold, toggle }">
          <ElForm :model="search" size="default" label-width="100px" inline-message inline class="search-form">
            <ElFormItem label="标题">
              <ElInput v-model="search.title" placeholder="请输入标题，支持模糊查询" clearable @keydown.enter="currentChange()" @clear="currentChange()" />
            </ElFormItem>
            <ElFormItem>
              <ElButton @click="searchReset(); currentChange()">
                重置
              </ElButton>
              <ElButton type="primary" @click="currentChange()">
                <template #icon>
                  <FaIcon name="i-ep:search" />
                </template>
                筛选
              </ElButton>
              <ElButton link disabled @click="toggle">
                <template #icon>
                  <FaIcon :name="fold ? 'i-ep:caret-bottom' : 'i-ep:caret-top' " />
                </template>
                \{{ fold ? '展开' : '收起' }}
              </ElButton>
            </ElFormItem>
          </ElForm>
        </template>
      </FaSearchBar>
      <ElDivider border-style="dashed" />
      <ElSpace wrap>
        <ElButton type="primary" size="default" @click="onCreate">
          <template #icon>
            <FaIcon name="i-ep:plus" />
          </template>
          新增{{ cname }}
        </ElButton>
        <ElButton v-if="batch.enable" size="default" :disabled="!batch.selectionDataList.length">
          单个批量操作按钮
        </ElButton>
        <ElButtonGroup v-if="batch.enable">
          <ElButton size="default" :disabled="!batch.selectionDataList.length">
            批量操作按钮组1
          </ElButton>
          <ElButton size="default" :disabled="!batch.selectionDataList.length">
            批量操作按钮组2
          </ElButton>
        </ElButtonGroup>
      </ElSpace>
      <ElTable v-loading="loading" class="my-4" :data="dataList" stripe highlight-current-row border height="100%" @sort-change="sortChange" @selection-change="batch.selectionDataList = $event">
        <ElTableColumn v-if="batch.enable" type="selection" align="center" fixed />
        <ElTableColumn prop="title" label="标题" />
        <ElTableColumn label="操作" width="250" align="center" fixed="right">
          <template #default="scope">
            <ElButton type="primary" size="small" plain @click="onEdit(scope.row)">
              编辑
            </ElButton>
            <ElButton type="danger" size="small" plain @click="onDel(scope.row)">
              删除
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <ElPagination :current-page="pagination.page" :total="pagination.total" :page-size="pagination.size" :page-sizes="pagination.sizes" :layout="pagination.layout" :hide-on-single-page="false" class="pagination" background @size-change="sizeChange" @current-change="currentChange" />
    </FaPageMain>
    <FormMode v-if="formMode === 'dialog' || formMode === 'drawer'" :id="formModeProps.id" v-model="formModeProps.visible" :mode="formMode" @success="getDataList" />
  </div>
</template>

<style scoped>
.absolute-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.search-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  margin-bottom: -18px;

  :deep(.el-form-item) {
    grid-column: auto / span 1;

    &:last-child {
      grid-column-end: -1;

      .el-form-item__content {
        justify-content: flex-end;
      }
    }
  }
}

.el-divider {
  width: calc(100% + 40px);
  margin-inline: -20px;
}
</style>
